<template>
  <el-form
    class="login-box1"
    ref="loginForm"
    :model="loginForm"
    :rules="rules"
    label-width="100px"
  >
    <h3 class="login-title">修改密码</h3>
    <el-form-item label="原密码" prop="oldpassword">
      <el-input
        type="password"
        show-password
        auto-complete="off"
        placeholder="请输入原密码"
        v-model="loginForm.oldpassword"
      ></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="password">
      <el-input
        type="password"
        show-password
        auto-complete="off"
        placeholder="请设置新密码"
        v-model="loginForm.password"
      ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="password2">
      <el-input
        type="password"
        show-password
        auto-complete="off"
        placeholder="请确认新密码"
        v-model="loginForm.password2"
      ></el-input>
    </el-form-item>
    <el-form-item style="float: right">
      <el-button type="primary" @click.native.prevent="handleLogin"
        >保存</el-button
      >
      <el-button @click="$refs['loginForm'].resetFields()">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { doEditUser, getUserById } from '@/api/user';
import { mapGetters } from 'vuex';
export default {
  name: 'reset',
  data() {
    const validateNewPassword = (rule, value, callback) => {
      if (value === this.loginForm.oldpassword) {
        callback(new Error('新密码不能与原密码相同!'));
      } else {
        callback();
      }
    };
    const validateNewPassword2 = (rule, value, callback) => {
      if (value !== this.loginForm.password) {
        callback(new Error('与新密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: '',
        id: '',
        oldpassword: '',
        password: '',
        password2: '',
      },

      // 表单校验
      rules: {
        oldpassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请设置新密码', trigger: 'blur' },
          { validator: validateNewPassword, trigger: 'blur' },
        ],
        password2: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: validateNewPassword2, trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(['loginId']),
  },
  //   created() {
  //     this.loginForm.oldpassword = decrypt(Cookies.get('password'));
  //   },
  methods: {
    /** 提交按钮 */
    handleLogin() {
      this.$refs.loginForm.validate().then((valid) => {
        if (valid) {
          let userId = this.loginId;
          this.loginForm.id = userId;
          getUserById(userId)
            .then((res) => {
              if (res.data.userInfo.password == this.loginForm.oldpassword) {
                if (this.loginForm.id != '') {
                  let password = this.loginForm.password;
                  this.loginForm = {
                    ...res.data.userInfo,
                    password,
                  };
                  console.log(this.loginForm);
                  doEditUser(this.loginForm).then((response) => {
                    this.$message.success(response.message + ' 3秒后将会退出');
                    setTimeout(async () => {
                      await this.$store.dispatch('user/logout');
                      sessionStorage.clear();
                      this.$router.push(`/login`);
                    }, 3000);
                  });
                }
              } else {
                this.$message.error('密码错误');
              }
            })
            .catch(() => {});
        }
      });
    },
  },
};
</script>
<style lang="scss">
.user-account-key {
  width: 500px;
  margin: 100px auto;
}
.login-box1 {
  border: 1px solid #dcdfe6;
  width: 500px;
  height: 340px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>
